<template>
  <div class="box">
    <h1>这是B组件,{{ store.state.count.num }}</h1>
    <h2>{{ num }}</h2>
    <el-button type="primary" @click="handleMinus">-</el-button>
    <div v-for="(item, index) in filterGlist" :key="index">
      商品名称 {{ item.name }} 商品价格 {{ item.price }} 商品库存 {{ item.m }}
    </div>
  </div>
</template>

<script setup>
// this.$store.state
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore(); //此处的store，等同于this.$store
const num = computed(() => store.state.count.num); //使用computed提取状态机数据
const handleMinus = () => {
  store.commit("count/decrement", {
    msg: "正在减操作",
    n: 10,
  });
};

// 方法1：可复用性较差
// 使用computed过滤glist然后使用，显示价格大于800的商品
// const filterGlist = computed(() => {
//   return store.state.glist.filter((item) => {
//     return item.price > 800;
//   });
// });

// 方法2：提取getters数据，可复用性较好
let filterGlist = computed(() => store.getters["goods/fGlist"]);
</script>

<style scoped>
.box {
  height: 300px;
  width: 50%;
  border: 1px solid #333;
  float: left;
  box-sizing: border-box;
}
</style>
